﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0">
    <meta name="imagemode" content="force">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" type="image/x-icon" href="">
    <link rel="apple-touch-icon-precomposed" href="">
    <link href="__STATIC__/assets/css/main.css" rel="stylesheet" />
    <link href="__STATIC__/assets/css/animate.min.css" rel="stylesheet" />
    <link href="__STATIC__/assets/css/swiper.min.css" rel="stylesheet" />
    <script src="__STATIC__/assets/js/jquery.min.js"></script>
    <script src="__STATIC__/assets/js/swiper.min.js"></script>
    <script src="__STATIC__/assets/js/swiper.animate.min.js"></script>
    <script src="__STATIC__/assets/js/newslist.js"></script>
		<title></title>
	<style>
			.swiper-container {
           width: 100%;
    height: 156px;
    margin: 0px auto;
    position: relative;
    top: 0px;
    overflow: hidden;
    }
    .swiper-slide div:nth-child(1){
    	width: 100%;
    height: 100%;
    background: url(__STATIC__/assets/img/news-banner.png)center no-repeat;
    background-size:100% 100% ;
    }
     .swiper-slide div:nth-child(2){
    	width: 100%;
    height: 100%;
    background: url(__STATIC__/assets/img/news-banner.png)center no-repeat;
    background-size:100% 100%;
    }
     .swiper-slide div:nth-child(3){
    	width: 100%;
    height: 100%;
    background: url(__STATIC__/assets/img/news-banner.png)center no-repeat;
    background-size:100% 100%;
    }
    .swiper-slide div:nth-child(1) div{
    	    position: absolute;
    width: 100%;
    height: 35px;
    background: rgba(0, 0, 0, 0.4);;
    bottom: 0px;
    color: #F49100;
    text-align: center;
    font-size: 13px;
    overflow: hidden;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet {
        margin: .8rem 5px!important;
    float: left!important;
    /* margin-left: 26%!important; */
    position: relative!important;
    left: 81%;
}
    .swiper-pagination-bullet {
    width: 8px!important;
    height: 8px!important;
    display: inline-block!important;
    border-radius: 100%!important;
    background: #fff!important;
    opacity: 1!important;
    position: relative!important;
    bottom: 31px!important;
}
.swiper-pagination-bullet-active {
    opacity: 1!important;
    background: #F49100!important;
}
.swiper-container-horizontal>.swiper-pagination {
    bottom: 0px!important;
    left: 0!important;
    width: 100%!important;
    height: 35px!important;
}
    .swiper-slide img{
    	width: 100%;
    	height: auto;
    }
    .swiper-pagination {
    position: absolute!important;
    text-align: center!important;
    -webkit-transition: 300ms!important;
    -moz-transition: 300ms!important;
    -o-transition: 300ms!important;
    transition: 300ms!important;
    -webkit-transform: translate3d(0,0,0)!important;
    -ms-transform: translate3d(0,0,0)!important;
    -o-transform: translate3d(0,0,0)!important;
    transform: translate3d(0,0,0)!important;
    z-index: 10!important;
}

#array{
	position:absolute;z-index:999;-webkit-animation: start 1s infinite ease-in-out;
}
    @-webkit-keyframes start {
	0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
	60% {opacity: 1;-webkit-transform: translate(0,0);}
	100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}
@-moz-keyframes start {
	0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
	60% {opacity: 1;-moz-transform: translate(0,0);}
	100% {opacity: 0;-moz-transform: translate(0,-8px);}
}
@keyframes start {
	0%,30% {opacity: 0;transform: translate(0,10px);}
	60% {opacity: 1;transform: translate(0,0);}
	100% {opacity: 0;transform: translate(0,-8px);}
}
.ani{
	position:absolute;
	}
.container-personcenter-footer ul li:nth-child(3) img{
				top: -10%;
			}
	</style>
	</head>
	<body>
		 <div class="news-header"></div>
	    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
            	<div>
            		<div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1s">第三届VDMA技术网络研讨会</div>
            	</div>
            </div>
            <div class="swiper-slide">
            	<div>
            		<div  class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1s">第三届VDMA技术网络研讨会</div>
            	</div>
            </div>
            <div class="swiper-slide">
            	<div>
            		<div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1s">第三届VDMA技术网络研讨会</div>
            	</div>
            </div>

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="container-news">
    	<ul>
        {volist name="data" id="vo"}
    		<li>
				<a href="{:url('news_info',['id'=>$vo['id']])}">
					<div><img src="__UPLOADS__/{$vo['news_img']}" width="120" height="120"></div>
					<div>
						<p>{$vo['news_title']}</p>
						<p>{$vo['news_brief']}<i>......</i></p>
						<img src="/vdma/public/static/assets/img/szong.png" width="35" height="35">
						<span>{$vo['news_time']}</span>
					</div>
				</a>
    		</li>
        {/volist}
    		<li>
    			<div><img src="/vdma/public/static/assets/img/list-img.png" width="120" height="120"></div>
    		  <div>
    		  	<p>VDMA中国商务环境调查</p>
    		  	<p>中国VDMA和VDMA经济与统计合作执中国VDMA<i>......</i></p>
    		  	<img src="/vdma/public/static/assets/img/szong.png" width="35" height="35">
    		  	<span>2017-08-23</span>
    		  </div>
    		</li>
    	</ul>
    </div>
    <div class="loading-modal load4" id="loading">
        <div class="loader">Loading...</div>
        <style>
            .loading-modal.load4.ng-hide {
                opacity: 0.1;
            }

            .loading-modal {
                transition: all linear 0.3s;
                position: absolute;
                z-index: 99999;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                background: rgba(0, 0, 0, 0.7);
                opacity: 1;
                overflow: hidden;
            }

            .load4 .loader {
                font-size: 20px;
                margin: 5em auto;
                width: 1em;
                height: 1em;
                border-radius: 50%;
                position: relative;
                text-indent: -9999em;
                top: 35%;
                -webkit-animation: load4 1.3s infinite linear;
                animation: load4 1.3s infinite linear;
            }

            @-webkit-keyframes load4 {
                0%, 100% {
                    box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #ffffff;
                }

                12.5% {
                    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
                }

                25% {
                    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
                }

                37.5% {
                    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
                }

                50% {
                    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
                }

                62.5% {
                    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 -0.5em #ffffff;
                }

                75% {
                    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0em #ffffff;
                }

                87.5% {
                    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 0.2em #ffffff;
                }
            }

            @keyframes load4 {
                0%, 100% {
                    box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #ffffff;
                }

                12.5% {
                    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
                }

                25% {
                    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
                }

                37.5% {
                    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
                }

                50% {
                    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
                }

                62.5% {
                    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 -0.5em #ffffff;
                }

                75% {
                    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0em #ffffff;
                }

                87.5% {
                    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 0.2em #ffffff;
                }
            }
        </style>
    </div>
     <div class="container-personcenter-footer">
                  <ul>
                      <li><img src="/vdma/public/static/assets/img/centerf.png" /></li>
                      <li><img src="/vdma/public/static/assets/img/centerc.png" /></li>
                      <li><img src="/vdma/public/static/assets/img/centere.png" /></li>
                  </ul>
              </div>
	</body>
	 <script>
    	$(document).ready(function(){
			$("#loading").hide();
      })
    </script>
</html>
